window.addEventListener("load", function () {

    //云服务
    // 1.创建li节点
    let serviceFont = ['生活服务', '金融科技', '交通地理', '充值缴费', '数据智能', '企业工商', '应用开发', '电子商务', '吃喝玩乐', '文娱视频'];
    let num = 1;
    for (let i = 0; i < 10; i++) {
        // 创建节点，添内容，追加节点
        let li = document.createElement("li");
        li.innerHTML = `<img src="../imgs/api${num < 10 ? "0" + num : num}.svg">
                        <p>${serviceFont[i]}</p>`
        $("#service ul").append(li);
        li.className = "flex-center";
        num++;
    }
    // 2.1方式一添加鼠标移入事件
    /*  $("#service ul").addEventListener("mouseover", function (e) {
         if (e.target.nodeName == "LI") {
             // 排他思想
             num = 1;
             for (let i = 0; i < $("#service ul li").length; i++) {
                 $("#service ul li")[i].children[0].src = `../imgs/api${num < 10 ? "0" + num : num}.svg`
                 num++;
                 $("#service ul li")[i].style.background = "#fff";
                 $("#service ul li")[i].style.color = "#000"
             }
 
             let srcNode = e.target.children[0].src;
             srcNode = srcNode.slice(0, srcNode.lastIndexOf("."));
             // 拼接-c.svg
             e.target.children[0].src = srcNode + "-c.svg";
             e.target.style.background = "#2f7ee9";
             e.target.style.color = "#fff";
         }
     } */
    // 2.2方式二：添加鼠标移入移出事件
    let oldUrl = "";
    $("#service ul li").forEach(function (v) {
        // 2.2.1鼠标移入事件
        v.addEventListener("mouseover", function () {
            // 背景颜色蓝色、文字白色
            this.style.background = "#2f7ee9";
            this.style.color = "#fff";
            // 更换图片 .svg 改为 -c.svg
            let imgUrl = this.firstElementChild.src;
            let str = imgUrl.slice(imgUrl.lastIndexOf("."))
            this.firstElementChild.src = imgUrl.replace(str, "-c.svg")
            // 保留旧地址
            oldUrl = imgUrl;
        })
        // 2.2.2鼠标移出事件
        v.addEventListener("mouseout", function () {
            // 背景颜色白色、文字黑色
            this.style.background = "#fff";
            this.style.color = "#000";
            this.firstElementChild.src = oldUrl
        })
    })



    // 独角兽区域
    // 默认显示第0张
    $("#unicorn .hcfc")[0].style.opacity = "1";
    let i=1;
    // 1.设置周期定时器
    this.window.setInterval(function () {

        //2. 排他思想，所有盒子消失
        $("#unicorn .hcfc").forEach(function (v) {
            v.style.opacity = "0";
        });
        // 3.第二张开始显示
        $("#unicorn .hcfc")[i].style.opacity="1"
        i++;
        // 4.当索引达到最大长度，归0
        if (i > $("#unicorn .hcfc").length-1){
            i=0;
        }
    }, 3000)







    // swiper插件---轮播图
    var mySwiper = new Swiper('.swiper', {
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            clickableClass: 'my-pagination-clickable'
        },
    }
    )
})